<template>
  <div class="mal-container">
    <div id="map-box"></div>
  </div>
</template>

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted } from 'vue'
let map = null
onMounted(() => {
  initMap()
})
onUnmounted(() => {
  map?.destroy()
})
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: 'dd6d2354204cdfa58dba988417e31cf5'
  }
  AMapLoader.load({
    key: '74f140887d15475e36ecea39c4a583bc',
    version: '2.1Beta'
  })
    .then((AMap) => {
      map = new AMap.Map('map-box', {
        viewMode: '3D',
        isHotspot: false,
        zoom: 9.4,
        center: [104.065861, 30.657401],
        pitch: 45,
        wallColor: '#374F71', //建筑物侧面颜色(3D夜景)
        roofColor: '#4C6E9B', //建筑物顶面颜色3D夜景
        // mapStyle: 'amap://styles/4e64fae1118f0ca5b4aec3b85238d19d'  //自定义地图(3D夜景)
        mapStyle: 'amap://styles/blue'
      })
    })
    .catch((e) => {
      console.log(e)
    })
}
</script>
<style scoped lang="scss">
.mal-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  color: #f00;
  font-size: vh(40);
}
#map-box {
  width: 100%;
  height: 100%;
}
</style>
